<template>
  <div class="template-wrapper">
    <div v-if="loading" class="loading"> <i class="el-icon-loading"></i></div>
    <div v-else >
 <div v-if="!isEdit">
    <div>
      <span class="label">安全承诺书模版
        <el-tooltip effect="dark" content="此模版用于工人在移动端发起安全承诺书签署" placement="top">
          <i class="el-icon-question"></i>
        </el-tooltip>：
      </span>
      <span v-if="safeDealTpl" class="value">  {{currentTemplateName}}  <el-button type="text" @click="handleEditClick">修改</el-button></span>
      <span v-else class="empty">暂未配置 <el-button type="text" @click="handleEditClick">去配置</el-button></span>
    </div>
  </div>
   <el-form ref="form" :model="form" label-width="140px" v-else>
      <el-form-item prop='dealTplId'>
        <div slot="label">
          <span>安全承诺书模版</span>
          <el-tooltip class="item" effect="dark" content="设置之后，工人可在移动端直接发起安全承诺书签署" placement="top">
            <i class="el-icon-question"></i>
          </el-tooltip>
        </div>
        <el-select placeholder="请选择模版" v-model="form.dealTplId" >
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
          </el-select>
      </el-form-item>
      <el-form-item>
        <el-button @click="handleSaveDealTpl" type="primary" :disabled="saveBtnDisabled">保存</el-button>
        <el-button @click="handleCancelSaveDealTpl" >取消</el-button>
      </el-form-item>
    </el-form>


    </div>

 </div>
</template>

<script>

import { getTemplateList } from '@common/api/template'; // , createFlowsByTemplates
import { getSettingsInfo, updateSettings } from '@common/api/organization'; // , createFlowsByTemplates

export default {
  name: 'setting',
  data() {
    return {
      loading: false,
      options: [],
      safeDealTpl: '',
      form: {
        dealTplId: '',
      },
      isEdit: false,
    };
  },
  computed: {
    currentTemplateName() {
      return this.options.find(v => v.value === this.safeDealTpl)?.label;
    },
    saveBtnDisabled() {
      return !this.form.dealTplId;
    },
  },
  created() {
    this.loading = true;
    this.fetchData().then(() => {
      getSettingsInfo().then(res => {
        this.loading = false;
        if (res?.data?.safeDealTpl) {
          this.safeDealTpl = res.data.safeDealTpl;
        }
      });
    });
  },
  methods: {
    async fetchData() {
      const params = {
        withPreviewUrl: false, // 是否获取模板预览链接
        tenantTemplateType: 3,
      };
      const response = await getTemplateList(params);
      if (response.code === 20000 && response?.data?.Templates?.length) {
        this.options = response?.data?.Templates.map(v => ({
          label: v.TemplateName,
          value: v.TemplateId,
        }));
      } else {
        this.options = [];
      }
      return;
    },
    handleEditClick() {
      this.form.dealTplId = this.safeDealTpl || '';
      this.isEdit = true;
    },
    async handleSaveDealTpl() {
      const res = await updateSettings({
        safeDealTpl: this.form.dealTplId,
      });
      if (res.isSuccess) {
        this.safeDealTpl = this.form.dealTplId;
        this.isEdit = false;
      }
    },
    handleCancelSaveDealTpl() {
      this.isEdit = false;
      this.form.dealTplId = this.safeDealTpl;
    },

  },
};
</script>

<style lang="scss" scoped>
.template-wrapper {
  padding: 20px;
  .loading{
    font-size: 36px;
    text-align: center;
    color: #409eff;
    margin-top: 30px;
  }
  .el-icon-question{
    color:#aaa;
  }
  .empty{
    color:#ccc;
  }
  .label{
    color:#666;
    font-size: 16px;
  }
  .value{
    color:#999;
  }
}
</style>
